<!DOCTYPE HTML>
<html>
<head>
<title>周末の网站</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel='stylesheet' type='text/css' />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="keywords" content="" />
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
 <!-- 网页来源：周末博客 http://www.youtiy.com/ -->
</head>
	<body>
		<!-- container -->
			<!-- header -->
			<div id="home" class="header">
				<div class="container">
				<!-- top-hedader -->
				<div class="top-header">
					<!-- /logo -->
					<!--top-nav---->
					<div class="top-nav">
					<div class="navigation">
					<div class="logo">
						<h1><a href="index.html"><span>周</span>末の网站</a></h1>
					</div>
					<div class="navigation-right">
						<span class="menu"><img src="images/menu.png" alt=" " /></span>
						<nav class="link-effect-3" id="link-effect-3">
							<ul class="nav1 nav nav-wil">
								<li class="active"><a data-hover="首页" href="http://www.youtiy.com/">首页</a></li>
								<li><a class="scroll" data-hover="关于我" href="#about">关于我</a></li>
								<li><a class="scroll" data-hover="我的技能" href="#services" >我的技能</a></li>
								<li><a class="scroll" data-hover="工作经验" href="#work">工作经验</a></li>
								<li><a class="scroll" data-hover="我的作品" href="#port">我的作品</a></li>
								<li><a class="scroll" data-hover="博客" href="#blogs">博客</a></li>
								<li><a class="scroll" data-hover="联系我" href="#contact">联系我</a></li>
							</ul>
						</nav>
							<!-- script-for-menu -->
								<script>
								   $( "span.menu" ).click(function() {
									 $( "ul.nav1" ).slideToggle( 300, function() {
									 // Animation complete.
									  });
									});
								</script>
							<!-- /script-for-menu -->
					</div>
					<div class="clearfix"></div>
				</div>
				<!-- /top-hedader -->
				</div>
			<div class="banner-info">
				<div class="col-md-7 header-right">
					<h1>Hi 大家好!</h1>
					<h6>UI网页设计师</h6>
					<ul class="address">
					
					<li>
							<ul class="address-text">
								<li><b>姓名</b></li>
								<li>周末</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>生日</b></li>
								<li>23-06-1990</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>手机 </b></li>
								<li>18567654343</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>地址 </b></li>
								<li>江苏南京.</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>E-MAIL </b></li>
								<li><a href="mailto:example@mail.com"> 772892349@qq.com</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>个人网站 </b></li>
								<li><a href="http://www.youtiy.com">www.youtiy.com</a></li>
							</ul>
						</li>
						
					</ul>
				</div>
				<div class="col-md-5 header-left">
					<img src="images/img1.jpg" alt="">
				</div>
				<div class="clearfix"> </div>
						
		      </div>
			</div>
		</div>
	</div>
			<!-- about -->
			<div id="about" class="about">
				<div class="col-md-6 about-left">
					<div id="owl-demo1" class="owl-carousel owl-carousel2">
					                <div class="item">
					                	<div class="about-left-grid">
											<h2>Hi! 我叫 <span>周末</span></h2>
											<p>本人诚实肯干，动手与学习能力强，能吃苦耐劳，对工作认真负责，性格内外兼具，诚恳，虚心好，有耐心，有一定组织与管理能力，善于沟通，在过去几年多的工作期间中严格要求自己，把专业知识与实践相结合，枳极地参加各种社会活动，将我所学用于实践，不断增加自己的个人能力。我怀着自信推荐自己，如果有幸成为贵公司的一员，我愿将从底做起，发挥自己的主动性极能力，竭诚为公司的发展增添光彩，希望贵公司给我一个发展的机会，与贵公司共同发展，共同进步。</p>
											<ul>
												<li><a class="a-btn-a scroll" href="#port">My Work</a></li>
												<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li>
											</ul>
										</div>
					                </div>
					                  <div class="item">
					                	<div class="about-left-grid">
											<h2>Hi! 我叫 <span>周末</span></h2>
											<p>本人诚实肯干，动手与学习能力强，能吃苦耐劳，对工作认真负责，性格内外兼具，诚恳，虚心好，有耐心，有一定组织与管理能力，善于沟通，在过去几年多的工作期间中严格要求自己，把专业知识与实践相结合，枳极地参加各种社会活动，将我所学用于实践，不断增加自己的个人能力。我怀着自信推荐自己，如果有幸成为贵公司的一员，我愿将从底做起，发挥自己的主动性极能力，竭诚为公司的发展增添光彩，希望贵公司给我一个发展的机会，与贵公司共同发展，共同进步。</p>
											<ul>
												<li><a class="a-btn-a scroll" href="#port">My Work</a></li>
												<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li>
											</ul>
										</div>
					                </div>
					                  <div class="item">
					                	<div class="about-left-grid">
											<h2>Hi! 我叫<span>周末</span></h2>
											<p>本人诚实肯干，动手与学习能力强，能吃苦耐劳，对工作认真负责，性格内外兼具，诚恳，虚心好，有耐心，有一定组织与管理能力，善于沟通，在过去几年多的工作期间中严格要求自己，把专业知识与实践相结合，枳极地参加各种社会活动，将我所学用于实践，不断增加自己的个人能力。我怀着自信推荐自己，如果有幸成为贵公司的一员，我愿将从底做起，发挥自己的主动性极能力，竭诚为公司的发展增添光彩，希望贵公司给我一个发展的机会，与贵公司共同发展，共同进步。</p>
											<ul>
												<li><a class="a-btn-a scroll" href="#port">My Work</a></li>
												<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li>
											</ul>
										</div>
					                </div>
					</div>
				</div>
				<div class="col-md-6 about-right">
					
				</div>
				<div class="clearfix"> </div>
							<link href="css/owl.carousel.css" rel="stylesheet">
							    <script src="js/owl.carousel.js"></script>
			<script>
				$(document).ready(function() {
					$("#owl-demo1").owlCarousel({
						items : 1,
						lazyLoad : false,
						autoPlay : true,
						navigation : false,
						navigationText :  false,
						pagination : true,
					});
				});
			</script>
			<!-- Feedback -->
			<script>
				$(document).ready(function() {
					$("#owl-demo3").owlCarousel({
						items : 1,
						lazyLoad : false,
						autoPlay : true,
						navigation : false,
						navigationText :  true,
						pagination :true,
					});
				});
			</script>
			</div>
			<!-- /about -->
			<!-- services -->
			<div id="services" class="services">
				<div class="container">
					<div class="service-head one text-center ">
						<h4>WHAT I DO</h4>
						<h3>我的<span>技能</span></h3>
						<span class="border two"></span>
					</div>
					<!-- services-grids -->
					<div class="wthree_about_right_grids w3l-agile">
				<div class="col-md-6 wthree_about_right_grid">
					<div class="col-xs-4 wthree_about_right_grid_left">
						<div class="hvr-rectangle-in">
							<i class="glyphicon glyphicon-pencil"></i>
						</div>
					</div>
					<div class="col-xs-8 wthree_about_right_grid_right">
						<h4>网页设计</h4>
						<p>精通各种网站制作软件photoshop、Dreamweaver、fireworks、flash等，精通HTML、CSS+DIV、XHTML;目前自学：Javascript、Actions </p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 wthree_about_right_grid">
					<div class="col-xs-4 wthree_about_right_grid_left">
						<div class="hvr-rectangle-in">
							<i class="glyphicon glyphicon-cog"></i>
						</div>
					</div>
					<div class="col-xs-8 wthree_about_right_grid_right">
						<h4>UI设计</h4>
						<p>精通各种网站制作软件photoshop、Dreamweaver、fireworks、flash等，精通HTML、CSS+DIV、XHTML;目前自学：Javascript、Actions</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 wthree_about_right_grid">
					<div class="col-xs-4 wthree_about_right_grid_left">
						<div class="hvr-rectangle-in">
							<i class="glyphicon glyphicon-leaf"></i>
						</div>
					</div>
					<div class="col-xs-8 wthree_about_right_grid_right">
						<h4>Photoshop</h4>
						<p>精通各种网站制作软件photoshop、Dreamweaver、fireworks、flash等，精通HTML、CSS+DIV、XHTML;目前自学：Javascript、Actions</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 wthree_about_right_grid">
					<div class="col-xs-4 wthree_about_right_grid_left">
						<div class="hvr-rectangle-in">
							<i class="glyphicon glyphicon-gift"></i>
						</div>
					</div>
					<div class="col-xs-8 wthree_about_right_grid_right">
						<h4>Dreamweaver</h4>
						<p>精通各种网站制作软件photoshop、Dreamweaver、fireworks、flash等，精通HTML、CSS+DIV、XHTML;目前自学：Javascript、Actions</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>

					<!-- services-grids -->
				</div>
			</div>
			<!-- services -->
			<!--work-experience-->
	<div id="work" class="work">
		<div class="container">
			<div class="service-head text-center">
						<h4>WHAT I DID</h4>
						<h3>我的<span>工作经验</span></h3>
						<span class="border one"></span>
					</div>
					<div class="time-main w3l-agile">
							<div class="col-md-6 year-info">
							   <ul class="year">
								   <li>2016</li>
								   <li>2015</li>
								   <li>2014</li>
								   <br/><br/><br/><br/><br/>
								   <li>2013</li>
								   <br/><br/><br/><br/><br/><br/>
								   <li>2012</li>
								   <div class="clearfix"></div>
								</ul>
							</div> 
					                        <ul class="col-md-6 timeline">
																<li>
																  <div class="timeline-badge info"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">阿里巴巴</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>负责商网形象[VisCEO]网页设计/制作/网站管理等方面工作。Possess eight years of professional experience in web designing.Extensive knowledge of current web standards, CSS and HTML.</p>
																	</div>
																  </div>
																</li>
																
																<li>
																  <div class="timeline-badge primary"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">腾讯</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>负责商网形象[VisCEO]网页设计/制作/网站管理等方面工作。Possess eight years of professional experience in web designing.Extensive knowledge of current web standards, CSS and HTML. </p>
																	</div>
																  </div>
																</li>
																
																
																
																<li>
																  <div class="timeline-badge danger"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">百度</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>负责商网形象[VisCEO]网页设计/制作/网站管理等方面工作。To obtain a challenging position as a Senior Web Designer where I can utilize my graphic and web designing skills for the growth of the organization. </p>
																	</div>
																  </div>
																</li>
																
																<li>
																  <div class="timeline-badge success"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">微软</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>负责商网形象[VisCEO]网页设计/制作/网站管理等方面工作。To obtain a challenging position as a Senior Web Designer where I can utilize my graphic and web designing skills for the growth of the organization.</p>
																	</div>
																  </div>
																</li>
																<li>
																  <div class="timeline-badge pass"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Google</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>负责商网形象[VisCEO]网页设计/制作/网站管理等方面工作。To obtain a challenging position as a Senior Web Designer where I can utilize my graphic and web designing skills for the growth of the organization.</p>
																	</div>
																  </div>
																</li>
															</ul>
								<div class="clearfix"></div>
								</div>
						</div>
				</div>
	<!--//work-experience-->

		<!-- portfolio -->
<div class="portfolio" id="port">
				<div class="service-head text-center">
						<h4>MY WORKS</h4>
						<h3>我的<span>作品</span></h3>
						<span class="border"></span>
					</div>
			<div class="portfolio-grids">
				<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
				<script type="text/javascript">
									$(document).ready(function () {
										$('#horizontalTab').easyResponsiveTabs({
											type: 'default', //Types: default, vertical, accordion           
											width: 'auto', //auto or any width like 600px
											fit: true   // 100% fit in a container
										});
									});
									
				</script>
				<div class="sap_tabs">
					<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						<ul class="resp-tabs-list">
							<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>所有</span></li> 
							<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>网页设计</span></li> 
							<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>移动UI</span></li> 				
							<li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span>ILLUSTRATIONS</span></li> 
						</ul>				  	 
						<div class="resp-tabs-container">
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal1" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic4.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal3" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic5.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
								
										<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
										
										</a>
								
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									
										<a href="#portfolioModal8" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic14.jpg" alt="">
										
										</a>
									
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd  ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
										
										</a>
									
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt="">
										
										</a>
								
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd">
									
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd">
									
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
									
										</a>
									
								</div>
								<div class="clearfix"></div>
							</div>
								<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3">
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd">
									
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
										
										</a>
									
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>
	<!-- //portfolio -->
    <!-- top-grids -->
				<div class="blog" id="blogs">
					<div class="container">
						<div class="service-head text-center">
						<h4>BLOGS</h4>
						<h3>我的<span>博客</span></h3>
						<span class="border one"></span>
					</div>
					   <div class="news-grid w3l-agile">
					    <div class="col-md-6 news-img">
						  <a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b1.jpg" alt=" " class="img-responsive"></a>
						 
						</div>
					    <div class="col-md-6 news-text">
						   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">CSS3中字体平滑处理和抗锯齿渲染</a></h3>
							<ul class="news">
								<li><i class="glyphicon glyphicon-user"></i> <a href="#">管理员</a></li>
								<li><i class="glyphicon glyphicon-comment"></i> <a href="#">2 回复</a></li>
								<li><i class="glyphicon glyphicon-heart"></i> <a href="#">50 喜欢</a></li>
								<li><i class="glyphicon glyphicon-tags"></i> <a href="#">3 标签</a></li>
							</ul>
							<p>在围观Drupal官方主题的时候，发现了一个有意思的非标准CSS选择器-webkit-font-smoothing，于是上手把玩了一番。如何使用CSS3字体平滑显示呢要知道，W3C对CSS中字体的抗锯齿渲染是有过考虑的，如font-smooth，不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异，总之，他并没有被选入Web标准。但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持，来让字体显示的更加平滑。</p>
							<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a>
					
						</div>
		
						<div class="clearfix"></div>
					 </div>
					  <div class="news-grid">

					    <div class="col-md-6 news-text two">
						   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">CSS3中字体平滑处理和抗锯齿渲染</a></h3>
							<ul class="news">
								<li><i class="glyphicon glyphicon-user"></i> <a href="#">管理员</a></li>
								<li><i class="glyphicon glyphicon-comment"></i> <a href="#">2 回复</a></li>
								<li><i class="glyphicon glyphicon-heart"></i> <a href="#">50 喜欢</a></li>
								<li><i class="glyphicon glyphicon-tags"></i> <a href="#">3 标签</a></li>
							</ul>
							<p>在围观Drupal官方主题的时候，发现了一个有意思的非标准CSS选择器-webkit-font-smoothing，于是上手把玩了一番。如何使用CSS3字体平滑显示呢要知道，W3C对CSS中字体的抗锯齿渲染是有过考虑的，如font-smooth，不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异，总之，他并没有被选入Web标准。但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持，来让字体显示的更加平滑。</p>
								<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a>
					
						</div>
						<div class="col-md-6 news-img two">
						   <a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b2.jpg" alt=" " class="img-responsive"></a>
						 
						</div>
						<div class="clearfix"></div>
					 </div>
					  <div class="news-grid">
					    <div class="col-md-6 news-img">
						  <a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b3.jpg" alt=" " class="img-responsive"></a>
						 
						</div>
					    <div class="col-md-6 news-text">
						   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">CSS3中字体平滑处理和抗锯齿渲染</a></h3>
							<ul class="news">
								<li><i class="glyphicon glyphicon-user"></i> <a href="#">管理员</a></li>
								<li><i class="glyphicon glyphicon-comment"></i> <a href="#">2 回复</a></li>
								<li><i class="glyphicon glyphicon-heart"></i> <a href="#">50 喜欢</a></li>
								<li><i class="glyphicon glyphicon-tags"></i> <a href="#">3 标签</a></li>
							</ul>
							<p>在围观Drupal官方主题的时候，发现了一个有意思的非标准CSS选择器-webkit-font-smoothing，于是上手把玩了一番。如何使用CSS3字体平滑显示呢要知道，W3C对CSS中字体的抗锯齿渲染是有过考虑的，如font-smooth，不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异，总之，他并没有被选入Web标准。但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持，来让字体显示的更加平滑。</p>
							<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a>
					
						</div>
		
						<div class="clearfix"></div>
					 </div>
					</div>
				</div>
				<!-- top-grids -->
	<!-- /blog-pop-->
			<div class="modal ab fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog about" role="document">
					<div class="modal-content about">
						<div class="modal-header">
							<button type="button" class="close ab" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
						</div>
						<div class="modal-body about">
								<div class="about">
									
									  <div class="about-inner">
									   
									      <img src="images/b3.jpg" alt="about"/>
										     <h4 class="tittle">CSS3中字体平滑处理和抗锯齿渲染</h4>
										   <p>在围观Drupal官方主题的时候，发现了一个有意思的非标准CSS选择器-webkit-font-smoothing，于是上手把玩了一番。如何使用CSS3字体平滑显示呢要知道，W3C对CSS中字体的抗锯齿渲染是有过考虑的，如font-smooth，不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异，总之，他并没有被选入Web标准。但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持，来让字体显示的更加平滑。</p>
									  </div>
												
								</div>
						</div>
					</div>
				</div>
			</div>
			<!-- //blog-pop-->

			<!-- /header -->
<div class="footer" id="contact">
	<div class="container">
	<div class="service-head one text-center">
						<h4>CONTACT ME</h4>
						<h3>快来<span>联系我吧</span></h3>
						<span class="border two"></span>
					</div>
		<div class="mail_us">
			<div class="col-md-6 mail_left">
				<div class="contact-grid1-left">
					<div class="contact-grid1-left1">
						<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
						<h4>我的邮箱</h4>
						<ul>
							<li>Mail1: <a href="mailto:info@example.com">info@example1.com</a></li>
							<li>Mail2: <a href="mailto:info@example.com">info@example2.com</a></li>
						</ul>
					</div>
				</div>
					<div class="contact-grid1-left">
						<div class="contact-grid1-left1">
							<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
							<h4>我的电话</h4>
							<ul>
								<li>手机: 189876789876</li>
								<li>传真: +123 312</li>
							</ul>
						</div>
					</div>
					<div class="contact-grid1-left">
						<div class="contact-grid1-left1">
							<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
							<h4>我的地址</h4>
							<ul>
								<li>北京王府井</li>
								<li>330号.</li>
							</ul>
						</div>
					</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-6 mail_right">
				<form action="#" method="post">
					<input type="text" name="Name" value="姓名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
					<input type="email" name="Email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
					<input type="text" name="Mobile number" value="电话" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Mobile number';}" required="">
					<textarea name="Message..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '留言...';}" required="">留言...</textarea>
					<input type="submit" value="发送">
					
				</form>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="copy_right text-center">
			<p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://www.youtiy.com">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			 <ul class="social-icons two">
							<li><a href="#"> </a></li>
							<li><a href="#" class="fb"> </a></li>
							<li><a href="#" class="in"> </a></li>
							<li><a href="#" class="dott"> </a></li>
						</ul>
		</div>
	</div>
</div>
			<!-- //footer -->
		<!-- /container -->
		<div class="portfolio-modal modal fade slideanim" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Adobe Photoshop</h3>
                        <img src="images/pic4.jpg" class="img-responsive img-centered" alt="">
                        <p>Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Adobe Photoshop</h3>
                        <img src="images/pic9.jpg" class="img-responsive img-centered" alt="">
                        <p>Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Adobe Photoshop</h3>
                        <img src="images/pic5.jpg" class="img-responsive img-centered" alt="">
                        <p>Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Adobe Photoshop</h3>
                        <img src="images/pic6.jpg" class="img-responsive img-centered" alt="">
                        <p>Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Adobe Photoshop</h3>
                        <img src="images/pic10.jpg" class="img-responsive img-centered" alt="">
                        <p>Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Adobe Photoshop</h3>
                        <img src="images/pic11.jpg" class="img-responsive img-centered" alt="">
                        <p>Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Adobe Photoshop</h3>
                        <img src="images/pic13.jpg" class="img-responsive img-centered" alt="">
                        <p>Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Adobe Photoshop</h3>
                        <img src="images/pic14.jpg" class="img-responsive img-centered" alt="">
                        <p>Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal9" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <img src="images/pic1.jpg" class="img-responsive img-centered" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<a href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	<!--start-smooth-scrolling-->
						<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
								<!--end-smooth-scrolling-->
<!-- //for bootstrap working -->
	<script src="js/bootstrap.js"></script>
	<!-- 网页来源：周末博客 http://www.youtiy.com/ -->
	</body>
</html>

